<template>
  <view class="login-container">
    <view class="login-header">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="title">用户登录</text>
    </view>
    
    <view class="login-form">
      <view class="form-item">
        <text class="label">用户名</text>
        <input 
          class="input" 
          v-model="username" 
          placeholder="请输入用户名" 
          placeholder-class="placeholder"
        />
      </view>
      
      <view class="form-item">
        <text class="label">密码</text>
        <input 
          class="input" 
          v-model="password" 
          type="password" 
          placeholder="请输入密码" 
          placeholder-class="placeholder"
        />
      </view>
      
      <button class="login-btn" @tap="handleLogin" :loading="loading">
        {{ loading ? '登录中...' : '登录' }}
      </button>
      
      <view class="tips">
        <text>提示：输入任意用户名即可登录，密码任意</text>
      </view>
      
      <view class="demo-users">
        <text class="demo-title">快速登录：</text>
        <view class="demo-list">
          <button class="demo-btn" @tap="quickLogin('admin')">管理员</button>
          <button class="demo-btn" @tap="quickLogin('user001')">用户001</button>
          <button class="demo-btn" @tap="quickLogin('guest')">游客</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      loading: false
    }
  },
  
  methods: {
    async handleLogin() {
      if (!this.username.trim()) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        });
        return;
      }
      
      this.loading = true;
      
      // 模拟登录延迟
      setTimeout(() => {
        // 存储用户信息
        const userInfo = {
          userId: this.username,
          nickname: this.username === 'admin' ? '管理员' : 
                   this.username === 'guest' ? '游客' : `用户_${this.username}`,
          loginTime: new Date().getTime()
        };
        
        uni.setStorageSync('userInfo', userInfo);
        uni.setStorageSync('userId', this.username);
        
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
        
        // 跳转到首页
        uni.navigateTo({
        	url: '/pages/index/index'
        });
        
        this.loading = false;
      }, 800);
    },
    
    quickLogin(username) {
      this.username = username;
      this.password = '123456'; // 演示密码
      this.handleLogin();
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.login-header {
  text-align: center;
  margin-bottom: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .logo {
    width: 88rpx;
    height: 88rpx;
    margin-right: 20rpx;
  }
  
  .title {
    font-size: 48rpx;
    color: #fff;
    font-weight: bold;
  }
}

.login-form {
  width: 100%;
  max-width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 40rpx;
  
  .label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .input {
    width: 100%;
    height: 80rpx;
    border: 1rpx solid #e0e0e0;
    border-radius: 10rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    
    &:focus {
      border-color: #667eea;
    }
  }
  
  .placeholder {
    color: #999;
    font-size: 28rpx;
  }
}

.login-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 40rpx;
  
  &:active {
    opacity: 0.8;
  }
}

.tips {
  margin-top: 30rpx;
  text-align: center;
  
  text {
    font-size: 24rpx;
    color: #999;
  }
}

.demo-users {
  margin-top: 60rpx;
  
  .demo-title {
    display: block;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
    text-align: center;
  }
  
  .demo-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20rpx;
  }
  
  .demo-btn {
    flex: 1;
    min-width: 120rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 24rpx;
    color: #667eea;
    background: #f5f5f5;
    border: 1rpx solid #667eea;
    border-radius: 30rpx;
    
    &:active {
      background: #667eea;
      color: #fff;
    }
  }
}
</style>